<template>
  <div class="addressOption">
    <div class="top">
      <div class="txt">送达</div>
      <div class="address" @click="showAddress = true">
        <i class="iconfont icon-fontclass-dizhi"></i>
        <div class="spanTxt">{{ addressName }}</div>
        <i class="iconfont icon-member_right"></i>
      </div>
    </div>
    <div class="bottom" v-if="yzaddressInfo">
      {{ state == "1" ? "有货 " : "无货 " }}
      {{ state == "1" ? plugin.place_order_msg :'' }}
    </div>
    <!-- 快递地址选择器 -->
    <yz-address-list style="z-index: 8999999;" :disableDefault="true" :goodsStyle="false" v-model="showAddress" :path_list="plugin.member_address" v-on:confirm="confirmSelectAddress"></yz-address-list>
    <!-- 快递地址选择器 end -->
  </div>
</template>
<script>
import yzAddressList from "components/ui_components/yz_addressList/index";
export default {
  props: ["plugin", "goods_info"],
  data() {
    return {
      addressName: "",
      showAddress: false,
      yzaddressInfo: [],
      state: 1, //1就是无货，2就是有货,
      judgmentOptionId: null
    };
  },
  components: { yzAddressList },
  mounted() {
    this.txtComputed();
    if (this.plugin) {
      this.firstGetData();
    }
  },
  methods: {
    confirmSelectAddress(item) {
      this.yzaddressInfo = item;
      let addressq = `${this.yzaddressInfo.province}${this.yzaddressInfo.city}${this.yzaddressInfo.district}${this.yzaddressInfo.street}${this.yzaddressInfo.address}`;
      this.addressName = addressq;
      this.tapMrAdress(item);
      this.getData();
    },
    txtComputed() {
      // 默认的情况下显示 默认地址
      let addressq = "";
      if (this.plugin.member_address) {
        this.plugin.member_address.forEach(element => {
          if (element.isdefault == 1) {
            addressq = `${element.province}${element.city}${element.district}${element.street}${element.address}`;
            this.addressName = addressq;
          }
        });
      }
    },
    firstGetData() {
      let arr = [];
      if(this.plugin.member_address.length > 0){
        this.plugin.member_address.forEach(element => {
          if (element.isdefault == 1) {
            arr = element;
          }
        });
        if (!this.judgmentOptionId) {
          this.judgmentOptionId = this.goods_info.get_goods.has_many_options[0].id;
        }
        this.yzaddressInfo = arr;
        this.getData();
      }

    },
    // 选中后设置成默认地址
    tapMrAdress(item) {
      let json = {
        username: item.username,
        mobile: item.mobile,
        province: item.province,
        city: item.city,
        district: item.district,
        address: item.address,
        isdefault: 1,
        address_id: item.id,
        street: item.street||''
      };
      $http.post("member.member-address.update", json, "加载中").then(
        response => {
          if (response.result === 1) {
          } else {
            this.$dialog.alert({ message: res.msg });
          }
        },
        response => {
          console.log(response.msg);
        }
      );
    },
    getData() {
      let arr = this.yzaddressInfo;
      let json = {
        goods_id: this.goods_info.get_goods.id,
        goods_option_id: this.judgmentOptionId, //默认第一个 this.goods_info.get_goods.has_many_options[0].id
        username: arr.username,
        mobile: arr.mobile,
        province: arr.province,
        city: arr.city,
        district: arr.district,
        address: arr.address
      };
      console.log(json, "传的json");
      $http.get("plugin.jd-supply.frontend.goods.option.inStock", json, "加载中").then(
        response => {
          if (response.result === 1) {
            this.state = response.data.status;
            this.$emit("addressState", this.state);
          } else {
            this.$dialog.alert({ message: res.msg });
          }
        },
        response => {
          console.log(response.msg);
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.addressOption {
  padding: 0.88rem 0.59rem;
  background: #fff;
  margin: 10px;
  border-radius: 10px;

  .bottom {
    text-align: left;
    padding-left: 3.72rem;
    padding-right: 1.06rem;
    margin-top: 0.84rem;
    color: #565656;
    font-size: 0.75rem;
  }

  .top {
    display: flex;
    justify-content: space-between;

    .txt {
      flex-shrink: 0;
      width: 3.75rem;
      text-align: left;
      padding-left: 0.59rem;
      font-size: 0.81rem;
      color: #9c9c9c;
    }

    .address {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;

      .icon-fontclass-dizhi {
        color: #f14e4e;
      }

      .spanTxt {
        text-align: left;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>